<script>
  import { getDictLabel } from '@/util/dictionary'

  export default {
    name: 'DictRender',
    props: {
      row: Object,
      column: Object,
      dictType: String,
      options: Array
    },
    data() {
      return {
        label: ''
      }
    },
    computed: {
      value() {
        return this.row[this.column.property]
      }
    },
    watch: {
      value: {
        immediate: true,
        async handler() {
          if (this.dictType) {
            this.label = await getDictLabel(this.dictType, this.value)
          } else {
            this.label = this.options?.find(value => value.value === this.value)?.label ?? this.value
          }
        }
      }
    },
    render() {
      return <span {...{ on: this.$listeners, domProps: this.$attrs }}>{this.label}</span>
    }
  }
</script>
